$baseFontSize: 40px !default;
$red: #D71345 !default;
$opacity: 1 !default;
@function rem($px) {
  @return $px / $baseFontSize * 1rem;
}

@mixin displayflex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($size:1) {
  -webkit-box-flex: $size;
  -moz-box-flex: $size;
  -webkit-flex: $size;
  -ms-flex: $size;
  flex: $size;
}

@mixin flexflowCol($direction:column,$dir:vertical) {
  -webkit-box-orient: $dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow: $direction nowrap;
  -ms-flex-flow: $direction nowrap;
  -moz-flex-flow: $direction nowrap;
  flex-flow: $direction nowrap;
}

@mixin flexflowRow($direction:row,$dir:horizontal) {
  -webkit-box-orient: $dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow: $direction nowrap;
  -ms-flex-flow: $direction nowrap;
  -moz-flex-flow: $direction nowrap;
  flex-flow: $direction nowrap;
}

@mixin shadow($x:0,$y:0px,$z:5px,$color:#bdbdbd) {
  box-shadow: $x $y $z $color;
  -webkit-box-shadow: $x $y $z $color;
  -moz-box-shadow: $x $y $z $color;
}

@mixin border-radius($radius:4px) {
  -webkit-border-radius: rem($radius);
  -moz-border-radius: rem($radius);
  -ms-border-radius: rem($radius);
  -o-border-radius: rem($radius);
  border-radius: rem($radius);
}

@mixin box-sizing($set:border-box) {
  -webkit-box-sizing: $set;
  -moz-box-sizing: $set;
  -ms-box-sizing: $set;
  -o-box-sizing: $set;
  box-sizing: $set;
}

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  font-family: Helvetica, sans-serif;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}

a:active, a:hover, a:link, a:visited {
  text-decoration: none;
  outline: none;
}

img{
  width: 100%;
  display: block;
  border: none;
}
html, body {
  width: 100%;
  height: 100%;
  font-size: 20px;
  background-color: #f5f5f5;
  position: relative;
}

html {
  font-size: 20px;
}

* {
  @include box-sizing(border-box);
  outline: none;
}

.header {
  width: 100%;
  img {
    display: block;
    width: 100%;
    min-height: rem(340px);
    border: none;
  }
}
.content {
  .panicBuy {
    background: #bb013b;
    padding: rem(22px) rem(26px);
    .panic_up {
      position: relative;
      font-size: 0;
      &:before {
        content: '抢购';
        display: block;
        position: absolute;
        z-index: 5;
        left: rem(8px);
        top: rem(6px);
        width: rem(80px);
        height: rem(80px);
        line-height: rem(80px);
        text-align: center;
        font-size: rem(32px);
        color: #fff;
        @include border-radius(86px);
        background-color: #f1792d;
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
      }
      img {
        width: 100%;
        height: rem(144px);
        border: none;
      }
      .overlay {
        position: absolute;
        z-index: 5;
        width: 100%;
        height: rem(45px);
        line-height: rem(45px);
        left: 0;
        bottom: 0;
        font-size: rem(24px);
        color: #fff;
        background: rgba(0, 0, 0, .56);
        padding: 0 rem(22px);
        overflow: hidden;
      }
    }
    .panic_down {
      padding: rem(12px);
      background-color: #fff;
      font-size: rem(24px);
      color: #515151;
      @include displayflex;
      @include flexflowRow;
      .name {
        width: rem(280px);
        font-size: rem(24px);
        line-height: rem(55px);
        color: #515151;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: rem(20px);
      }
      .prices {
        height: rem(55px);
        line-height: rem(55px);
        @include flex;
        white-space: nowrap;
        background-color: #df0446;
        font-size: rem(24px);
        color: #fff;
        text-align: center;
        @include border-radius(8px);
        span {
          font-size: rem(32px);
        }
      }
    }
  }
  .panels-wrap {
    .tabs {
      @include displayflex;
      @include flexflowRow;
      .tab {
        display: block;
        text-align: center;
        font-size: rem(32px);
        color: #fff;
        height: rem(58px);
        line-height: rem(58px);
        @include flex;
      }
      .tab:first-child {
        background-color: #f3863e;
      }
      .tab:nth-child(2) {
        background-color: #7a28ab;;
      }
      .tab:last-child {
        background-color: #df0446;
      }
    }
    .panels {
      width: 100%;
      .panel {
        width: 100%;
        padding: rem(20px) rem(26px);
        display: none;
        .slogan {
          width: 100%;
          display: block;
          margin-bottom: rem(30px);
        }
        .products {
          padding-bottom: rem(20px);
          .row {
            padding-bottom: rem(38px);
            @include displayflex;
            @include flexflowRow;
            .product {
              @include flex;
              background-color: #fff;
              .p-up {
                font-size: 0;
                position: relative;
                img {
                  width: 100%;
                  height: rem(161px);
                  border: none;
                }
                .overlay {
                  width: 100%;
                  height: rem(50px);
                  position: absolute;
                  line-height: rem(50px);
                  background: rgba(0, 0, 0, .56);
                  left: 0;
                  bottom: 0;
                  z-index: 5;
                  padding: 0 rem(16px);
                  font-size: rem(26px);
                  color: #fff;
                  font-weight: bold;
                  overflow: hidden;
                }
                .tag {
                  display: inline-block;
                  position: absolute;
                  z-index: 5;
                  color: #fff;
                  font-size: rem(24px);
                  right: 0;
                  top: 0;
                  padding: rem(12px) rem(10px);
                  background-color: #f3863e;
                  -webkit-border-radius: rem(8px) 0 0 rem(8px);
                  -moz-border-radius: rem(8px) 0 0 rem(8px);
                  -ms-border-radius: rem(8px) 0 0 rem(8px);
                  -o-border-radius: rem(8px) 0 0 rem(8px);
                  border-radius: rem(8px) 0 0 rem(8px);
                }
              }
              .p-down {
                padding: rem(16px);
                .name {
                  color: #515151;
                  font-size: rem(24px);
                  line-height: rem(36px);
                  min-height: rem(108px);
                }
                .info {
                  @include displayflex;
                  @include flexflowRow;
                  .price {
                    @include flex;
                    font-size: rem(24px);
                    color: #df0446;
                    span{
                      font-size: rem(32px);
                    }
                  }
                  a {
                    display: block;
                    width: rem(129px);
                    height: rem(38px);
                    line-height: rem(38px);
                    text-align: center;
                    background-color: #df0446;
                    font-size: rem(24px);
                    color: #fff;
                    @include border-radius(8px);
                  }
                }
              }
            }
            .product:first-child {
              margin-right: rem(20px);
            }
          }
          .row:last-child{
            padding-bottom: 0;
          }
        }
        .recommend{
          background-color: #fff;
          @include displayflex;
          @include flexflowRow;
          -webkit-box-pack:center;
          -webkit-justify-content:center;
          justify-content:center;
          -webkit-box-align:center;
          -webkit-align-items:center;
          align-items:center;
          .left{
            width: rem(304px);
            img{
              display: block;
              width: 100%;
            }
          }
          .right{
            @include flex;
            padding: rem(12px) rem(12px);
            font-size: rem(24px);
            color: #515151;
            line-height: rem(28px);
            .title{
              font-size: rem(24px);
              line-height: rem(28px);
              color: #171717;
              font-weight: bold;
              padding-bottom: rem(8px);
              .grey{
                color: #515151;
              }
            }
            .name{
              font-size: rem(24px);
              color: #515151;
              padding-bottom: rem(14px);
            }
            .info {
              @include displayflex;
              @include flexflowRow;
              .price {
                @include flex;
                font-size: rem(24px);
                color: #df0446;
                span{
                  font-size: rem(32px);
                }
              }
              a {
                display: block;
                width: rem(129px);
                height: rem(38px);
                line-height: rem(38px);
                text-align: center;
                background-color: #df0446;
                font-size: rem(24px);
                color: #fff;
                @include border-radius(8px);
              }
            }
          }
        }
        .footer{
          padding: rem(20px) rem(14px) 0;
          img{
            width: 100%;
            min-height: rem(133px);
          }
        }
      }
      .panel.current {
        display: block;
      }
      .panel:first-child {
        background-color: #f89c4e;
        border-top: rem(8px) solid #f3863e;
        .slogan {
          min-height: rem(78px);
          padding: 0 rem(28px);
        }
      }
      .panel:nth-child(2) {
        background-color: #903fb5;
        border-top: rem(8px) solid #7a28ab;
        .slogan {
          min-height: rem(71px);
          padding: 0 rem(28px);
        }
        .footer{
          padding: 0 rem(14px);
        }
      }
      .panel:last-child {
        padding: rem(20px) 0;
        background-color: #e52f53;
        border-top: rem(8px) solid #df0446;
        .slogan {
          padding: 0;
          min-height: rem(83px);
        }
        .recommend{
          margin-bottom: rem(20px);
          position: relative;
          &:before{
            position: absolute;
            content: '';
            display: block;
            width: rem(26px);
            height: rem(28px);
            background: url(/old/images/snow@4x.png) no-repeat center;
            background-size: cover;
            bottom: rem(14px);
            left: rem(-35px);
            z-index: 5;
          }
          &:after{
            position: absolute;
            content: '';
            display: block;
            width: rem(21px);
            height: rem(23px);
            background: url(/old/images/snow@4x.png) no-repeat center;
            background-size: cover;
            bottom: rem(44px);
            right: rem(-30px);
            z-index: 5;
          }
          .left{
            position: relative;
            .overlay {
              width: 100%;
              height: rem(50px);
              position: absolute;
              line-height: rem(50px);
              background: rgba(0, 0, 0, .56);
              left: 0;
              bottom: 0;
              z-index: 5;
              padding: 0 rem(16px);
              font-size: rem(26px);
              color: #fff;
              font-weight: bold;
              overflow: hidden;
            }
            .tag {
              display: inline-block;
              position: absolute;
              z-index: 5;
              color: #fff;
              font-size: rem(24px);
              right: 0;
              top: 0;
              padding: rem(12px) rem(10px);
              background-color: #f3863e;
              -webkit-border-radius: rem(8px) 0 0 rem(8px);
              -moz-border-radius: rem(8px) 0 0 rem(8px);
              -ms-border-radius: rem(8px) 0 0 rem(8px);
              -o-border-radius: rem(8px) 0 0 rem(8px);
              border-radius: rem(8px) 0 0 rem(8px);
            }
          }
        }
        .inner{
          padding: 0 rem(26px);
          .footer{
            padding: 0 rem(14px);
          }
        }
      }
    }
  }
}
